<template>
  <div class="layoutContainer" :style="loginStyle">
    <!-- <div class="blue_bg" :style="loginType=='tab2'?{right:0}:{}">

    </div> -->
    <a-row>
      <a-col :xs="{ span: 0 }" :md="{ span: 7, offset: 5 }">
        <img :src="logo" style="width: 104px" />
        <template v-if="describe">
          <div  v-html="describe"></div>
        </template>
        <template v-else>
          <div class="desc_title">10年专注，让运营更简单</div>
          <div>
            <div class="desc_sub_info">
              <span class="desc_info">注册用户</span> <span class="desc_num">24,747,719</span>
            </div>
            <div class="desc_sub_info"><span class="desc_info">安全运行</span> <span class="desc_num">3799天</span></div>
            <div class="desc_sub_info"><span class="desc_info">覆盖行业</span> <span class="desc_num">100+</span></div>
          </div>
        </template>
        <a-divider style="width: 366px; margin: 36px 0; height: 2px; min-width: 366px"></a-divider>
        <img v-if="help_logo" :src="help_logo" style="width: 366px" />
        <img v-else src="@/assets/images/login/ad.png" style="width: 366px" />
        <div class="link_style" v-html="$store.getters.admin_copyright">
        </div>
      </a-col>
      <a-col :xs="{ span: 20, offset: 2 }" :md="{ span: 7, offset: 0 }">
        <div class="help_center"></div>
        <router-view />
      </a-col>
    </a-row>
  </div>
</template>

<script>
import { deviceMixin } from '@/store/device-mixin'
// import logoImg from '@/assets/images/login/logo.png'

export default {
  name: 'LoginLayout',
  mixins: [deviceMixin],
  components: {},
  props: {},
  data() {
    return {}
  },
  computed: {
    loginStyle(){
      let {passport_bg} = this.$store.getters;
      if(passport_bg){
        return  {
          background:`url(${passport_bg}) no-repeat center`,
          backgroundSize:"cover"
        }
      }

      return {}
    },
    loginType(){
      return this.$store.state.user.loginType
    },
    logo () {
      return this.$store.getters.admin_logo
    },
    help_logo () {
      return this.$store.getters.help_logo
    },
    describe () {
      console.log(this.$store.getters)
      return this.$store.getters.describe
    }
  },
  watch: {
    loginType(val){
    console.log("🚀 ~ file: LoginLayout.vue ~ line 46 ~ loginType ~ val", val)
    }
  },
  created() {},
  mounted() {},
  updated() {},
  methods: {},
}
</script>

<style scoped lang="less">
.blue_bg{
  width: 596px;
  position: fixed;
  height: 100%;
  top:0;
  right:-596px;
  transition: all .3s;
  background:rgba(42, 108, 236, 1) ;
}
.help_center {
  font-size: 14px;
  text-align: right;
  margin-bottom: 41px;
}
.link_style {
  margin-top: 45px;
  width: 482px;
  font-size: 12px;
  line-height: 24px;
  opacity: 0.66;
}
.desc_sub_info {
  line-height: 31px;
  .desc_info {
    font-size: 16px;
    opacity: 0.6;
    margin-right: 10px;
  }
  .desc_num {
    font-size: 16px;
    font-weight: 500;
  }
}
.desc_title {
  margin-top: 85px;
  margin-bottom: 43px;
  font-size: 30px;
  font-weight: 500;
}
.layoutContainer {
  color: #000000;
  font-family: PingFang SC;
  font-weight: 400;
  padding-top: 70px;
  width: 100%;
  min-height: 100%;
  background: #f0f2f5 url(~@/assets/images/login/bg.jpg) no-repeat 50%;
  background-size: 100%;
}
</style>